```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenHands - 开源AI开发助手平台</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .code-block {
            font-family: 'Courier New', monospace;
            background-color: #1e293b;
            color: #e2e8f0;
            border-left: 4px solid #7c3aed;
        }
        .mermaid {
            background-color: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-28">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                        <span class="block">OpenHands</span>
                        <span class="text-2xl md:text-3xl font-light opacity-90">开源AI开发助手平台</span>
                    </h1>
                    <p class="text-xl mb-8 opacity-90">通过自动化AI代理加速您的开发流程，让编码更高效、更智能</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://github.com/All-Hands-AI/OpenHands" class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition-all duration-300 flex items-center">
                            <i class="fab fa-github mr-2"></i> GitHub 仓库
                        </a>
                        <a href="#quick-start" class="bg-transparent border-2 border-white hover:bg-white hover:text-indigo-600 px-6 py-3 rounded-lg font-medium transition-all duration-300 flex items-center">
                            <i class="fas fa-rocket mr-2"></i> 快速开始
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1749898383036-6ce483be-dfeb-4edb-899c-3146b171d9e8.png" alt="OpenHands 界面截图" class="rounded-xl shadow-2xl max-h-96 border-4 border-white">
                </div>
            </div>
        </div>
    </section>

    <!-- Features Overview -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">核心功能概览</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">OpenHands 利用先进的AI技术，为开发者提供全方位的自动化支持</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-code text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">代码编辑与修复</h3>
                    <p class="text-gray-600">自动修改代码，解决GitHub问题，在SWE-Bench基准测试中成功率超过50%</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-terminal text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">命令行操作</h3>
                    <p class="text-gray-600">执行终端命令，管理环境配置，简化DevOps流程</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-globe text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Web浏览与API调用</h3>
                    <p class="text-gray-600">可访问StackOverflow或调用外部API获取解决方案</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-users text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多代理协作</h3>
                    <p class="text-gray-600">支持多个AI代理并行处理复杂项目，显著缩短开发周期</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fab fa-github text-red-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">GitHub集成</h3>
                    <p class="text-gray-600">无缝连接GitHub，自动创建PR或处理issue</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-lightbulb text-yellow-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能建议</h3>
                    <p class="text-gray-600">基于最佳实践的代码改进建议，提升代码质量</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">使用场景</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">OpenHands 适用于多种开发场景，让您的工作更高效</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
                            <i class="fas fa-bug text-indigo-600"></i>
                        </div>
                        <h3 class="text-xl font-bold">自动化修复Bug</h3>
                    </div>
                    <p class="text-gray-600 mb-4">快速定位并修复开源项目的GitHub issue，减少手动调试时间，让您专注于更有创造性的工作。</p>
                    <div class="bg-indigo-50 p-3 rounded-lg">
                        <p class="text-sm text-indigo-800 italic">"以前需要数小时调试的问题，现在几分钟就能解决"</p>
                    </div>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                            <i class="fas fa-bolt text-purple-600"></i>
                        </div>
                        <h3 class="text-xl font-bold">原型开发</h3>
                    </div>
                    <p class="text-gray-600 mb-4">通过自然语言指令快速生成全栈应用雏形，如博客网站，大幅缩短从想法到实现的时间。</p>
                    <div class="bg-purple-50 p-3 rounded-lg">
                        <p class="text-sm text-purple-800 italic">"只需描述需求，AI就能生成90%的初始代码"</p>
                    </div>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
                            <i class="fas fa-exchange-alt text-blue-600"></i>
                        </div>
                        <h3 class="text-xl font-bold">代码迁移</h3>
                    </div>
                    <p class="text-gray-600 mb-4">协助将旧版代码（如Go微服务）升级到最新版本，降低技术债务，保持代码库现代化。</p>
                    <div class="bg-blue-50 p-3 rounded-lg">
                        <p class="text-sm text-blue-800 italic">"自动处理了80%的版本迁移工作"</p>
                    </div>
                </div>
            </div>
            
            <div class="mt-12 bg-white p-8 rounded-xl shadow-md">
                <div class="flex items-start">
                    <div class="w-16 h-16 bg-yellow-100 rounded-lg flex items-center justify-center mr-6 mt-1">
                        <i class="fas fa-question text-yellow-600 text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-4">是否曾因繁琐的Bug修复而耗费时间？</h3>
                        <p class="text-gray-600 mb-6">OpenHands 如何优化您的工作流程？想象一下，当您专注于产品创新时，AI助手正在后台自动处理那些重复性的编码任务。</p>
                        <a href="#quick-start" class="inline-flex items-center text-indigo-600 font-medium hover:text-indigo-800 transition-colors">
                            立即体验 <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">优势与特色</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">为什么开发者选择 OpenHands？</p>
            </div>
            
            <div class="flex flex-col md:flex-row gap-8">
                <div class="md:w-1/2">
                    <div class="bg-gray-50 p-8 rounded-xl h-full">
                        <h3 class="text-2xl font-bold mb-6 highlight-text">开源优势</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                                <span><span class="font-medium">MIT许可证：</span> 完全开源，可自由定制与社区协作</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                                <span><span class="font-medium">多模型支持：</span> 支持多种LLM（如Claude 3.5 Sonnet），性能强劲</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                                <span><span class="font-medium">GitHub集成：</span> 在处理真实GitHub issue时表现优异</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                                <span><span class="font-medium">统一环境：</span> 集成VS Code Web和Jupyter，减少工具切换</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="md:w-1/2">
                    <div class="bg-gray-50 p-8 rounded-xl h-full">
                        <h3 class="text-2xl font-bold mb-6 highlight-text">技术考量</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
                                <span><span class="font-medium">LLM依赖：</span> 对高端LLM的依赖可能限制本地模型用户</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
                                <span><span class="font-medium">学习曲线：</span> 需要适应AI代理的工作方式以获得最佳效果</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
                                <span><span class="font-medium">任务复杂度：</span> 简单任务可能不如手动操作快捷</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
                                <span><span class="font-medium">配置要求：</span> 需要稳定的网络和适当的硬件资源</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Architecture Diagram -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">系统架构</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">OpenHands 如何工作？</p>
            </div>
            
            <div class="mermaid">
                flowchart TD
                    A[用户输入任务] --> B{任务类型判断}
                    B -->|代码相关| C[代码编辑代理]
                    B -->|CLI命令| D[命令行代理]
                    B -->|信息查询| E[Web浏览代理]
                    C --> F[代码修改/生成]
                    D --> G[执行命令]
                    E --> H[获取外部信息]
                    F --> I[结果验证]
                    G --> I
                    H --> I
                    I --> J[结果输出]
                    J --> K[用户反馈]
                    K -->|改进| A
                    
                    style A fill:#6366f1,color:#fff
                    style B fill:#8b5cf6,color:#fff
                    style C fill:#10b981,color:#fff
                    style D fill:#3b82f6,color:#fff
                    style E fill:#f59e0b,color:#fff
                    style F fill:#10b981,color:#000
                    style G fill:#3b82f6,color:#000
                    style H fill:#f59e0b,color:#000
                    style I fill:#ec4899,color:#fff
                    style J fill:#6366f1,color:#fff
                    style K fill:#8b5cf6,color:#fff
            </div>
            
            <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-lg shadow">
                    <h3 class="font-bold text-lg mb-3 flex items-center">
                        <i class="fas fa-user-astronaut text-indigo-600 mr-2"></i> 用户友好
                    </h3>
                    <p class="text-gray-600">通过简单的自然语言描述即可开始工作，无需复杂配置</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow">
                    <h3 class="font-bold text-lg mb-3 flex items-center">
                        <i class="fas fa-project-diagram text-purple-600 mr-2"></i> 模块化设计
                    </h3>
                    <p class="text-gray-600">各功能模块独立工作又相互协作，灵活应对不同场景</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow">
                    <h3 class="font-bold text-lg mb-3 flex items-center">
                        <i class="fas fa-sync-alt text-blue-600 mr-2"></i> 持续改进
                    </h3>
                    <p class="text-gray-600">通过用户反馈不断优化代理行为，效果越用越好</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Quick Start -->
    <section id="quick-start" class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">上手指南</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">几分钟内开始使用 OpenHands</p>
            </div>
            
            <div class="bg-gray-50 rounded-xl overflow-hidden">
                <div class="grid grid-cols-1 md:grid-cols-2">
                    <div class="p-8 md:p-10">
                        <h3 class="text-2xl font-bold mb-6">安装与配置</h3>
                        <ol class="space-y-6">
                            <li class="flex items-start">
                                <div class="flex-shrink-0 bg-indigo-100 text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 font-bold">1</div>
                                <div>
                                    <h4 class="font-bold mb-1">安装Docker</h4>
                                    <p class="text-gray-600">确保系统支持（Linux/MacOS/Windows WSL）</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="flex-shrink-0 bg-indigo-100 text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 font-bold">2</div>
                                <div>
                                    <h4 class="font-bold mb-1">运行容器</h4>
                                    <div class="code-block p-4 rounded-lg mt-2">
                                        <code>docker run -it -p 3000:3000 -v $(pwd)/workspace:/opt/workspace_base ghcr.io/all-hands-ai/openhands:0.9</code>
                                    </div>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="flex-shrink-0 bg-indigo-100 text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 font-bold">3</div>
                                <div>
                                    <h4 class="font-bold mb-1">访问界面</h4>
                                    <p class="text-gray-600">在浏览器中打开 <a href="http://localhost:3000" class="text-indigo-600 hover:underline">http://localhost:3000</a></p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="flex-shrink-0 bg-indigo-100 text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 font-bold">4</div>
                                <div>
                                    <h4 class="font-bold mb-1">配置API密钥</h4>
                                    <p class="text-gray-600">输入您的LLM API密钥（如Claude或GPT-4）</p>
                                </div>
                            </li>
                        </ol>
                    </div>
                    
                    <div class="bg-indigo-600 text-white p-8 md:p-10 flex flex-col">
                        <h3 class="text-2xl font-bold mb-6">成本与定价</h3>
                        <div class="space-y-6 flex-grow">
                            <div class="bg-indigo-700 p-5 rounded-lg">
                                <h4 class="font-bold flex items-center mb-2">
                                    <i class="fas fa-gem mr-2"></i> 开源版本
                                </h4>
                                <p class="mb-3">完全免费使用，无需注册</p>
                                <ul class="text-indigo-100 space-y-2 text-sm">
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle mt-1 mr-2"></i>
                                        <span>所有核心功能</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle mt-1 mr-2"></i>
                                        <span>社区支持</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle mt-1 mr-2"></i>
                                        <span>自行部署</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <div class="bg-white text-indigo-900 p-5 rounded-lg">
                                <h4 class="font-bold flex items-center mb-2">
                                    <i class="fas fa-cloud mr-2"></i> 云版本
                                </h4>
                                <p class="mb-3">OpenHands Cloud 提供$50免费额度</p>
                                <ul class="text-gray-700 space-y-2 text-sm">
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                        <span>无需维护基础设施</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                        <span>自动扩展</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                        <span>高级功能</span>
                                    </li>
                                </ul>
                                <a href="https://x.ai/grok" class="mt-3 inline-block text-sm bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded transition-colors">
                                    查看定价详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-12 text-center">
                <div class="bg-white p-8 rounded-xl shadow-md inline-block max-w-2xl">
                    <h3 class="text-2xl font-bold mb-4">准备好提升开发效率了吗？</h3>
                    <p class="text-gray-600 mb-6">您希望自动化哪些开发任务？OpenHands 可以帮助您实现。</p>
                    <a href="https://github.com/All-Hands-AI/OpenHands" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-lg font-medium transition-colors duration-300 inline-flex items-center">
                        <i class="fab fa-github mr-2"></i> 立即开始
                    </a>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```